<template>
	<div>
		{{user.username}}
	</div>
	<div>
		<el-form :model="user" class="demo-ruleForm" label-width="120px" status-icon style="width: 800px" :rules="myrules" >
			<el-form-item label="用户名: " prop="username">
				<el-input v-model="user.username" placeholder="6-20位" size="large"></el-input>
			</el-form-item>
		
		<el-form-item label="密码：" prop="password">
				<el-input v-model.trim="user.password" placeholder="6-20位" size="large"></el-input>
			</el-form-item>
			
<!-- 			    <el-form-item label="密码" prop="password">
			      <el-input type="password" v-model.trim="user.password" @input="validatePassword" placeholder="Enter your password"></el-input>
			      <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
			    </el-form-item> -->
		
		<el-form-item label="确认密码：" prop="repassword">
				<el-input v-model="user.repassword" placeholder="6-20位" size="large"></el-input>
			</el-form-item>
			
<!-- 			    <el-form-item label="确认密码" prop="repassword">
			      <el-input type="password" v-model="user.repassword" @input="validateRepassword" placeholder="Confirm your password"></el-input>
			      <span v-if="repasswordError" class="error-message">{{ repasswordError }}</span>
			    </el-form-item> -->
		
		<el-form-item label="性别:">
		    <el-radio-group v-model="user.sex"  class="ml-4">
		      <el-radio value="1" size="small">男</el-radio>
		      <el-radio value="2" size="small">女</el-radio>
		    </el-radio-group>
		</el-form-item>

		
		<el-form-item label="爱好">
			  <el-checkbox-group v-model="user.hobby">
			    <el-checkbox name="hobby" value="1" label="打游戏"/>
			    <el-checkbox name="hobby" value="2" label="采山菜"/>
			  </el-checkbox-group>
		</el-form-item>
		
		<el-form-item>
			<el-button type="primary"  @click="submit">创建</el-button>
		</el-form-item>	
		</el-form>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue"
	let user=reactive({
		username:'1',
		password:'',
		repassword:'',
		sex:'',
		commit:'',
		hobby:[]
		
	})
	let submit=()=>{
		console.log(user.sex)
		console.log(user.hobby)
	}
	const selected = ref('A')
	
	const options = ref([
	  { text: 'One', value: 'A' },
	  { text: 'Two', value: 'B' },
	  { text: 'Three', value: 'C' }
	])
	
	
	// const passwordError = ref('');
	// const repasswordError = ref('');
	
	const validateRepassword=()=>{
		
	}
	let myrules=reactive({
		username:[
			{required:true,trigger:'blur',message:'用户名必须填写'},
			{min:6,max:20,trigger:'blur',message:'用户名长度在6-20位'}
		],
		password:[
			{required:true,trigger:'blur',message:'密码不能为空'},
			{min:6,max:20,trigger:'blur',message:'密码长度在6-20位'}
		],
		repassword:[
			{required:true,trigger:'blur',message:'请确认密码'},
			{validator:validateRepassword,trigger:'blur',message:'前后密码不一致'}
		]
	})
	// const validateRepassword = () => {
	//   if (user.repassword === '') {
	//     repasswordError.value = '请确认密码';
	//   } else if (user.repassword !== user.password) {
	//     repasswordError.value = '两次输入密码不一致';
	//   } else {
	//     repasswordError.value = '';
	//   }
	// };
	// const validatePassword = () => {
	//   if (user.password.length < 6 || user.password.length > 20) {
	//     passwordError.value = '密码长度在6-20位';
	//   } else {
	//     passwordError.value = '';
	//   }
	//   validateRepassword();
	// };

	
</script>

<style>
/* 	.error-message {
	  color: red;
	  font-size: 12px;
	} */
</style>
